<!--场地环境-->
<template>
<div>
  <div class="cd_01">
    <el-scrollbar>
      <div class="scrollbar-flex-content">
        <el-text tag="b" style="font-size: 18px">足球场地</el-text>
        <div
            v-for="(o, index) in footballList"
            :key="index"
            :span="8"
            :offset="index > 0 ? 5 : 0"
            class="scrollbar-demo-item"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img
                :src="o.url"
                class="image"
            />
            <div style="padding: 14px">
              <span style="font-weight: bold;">{{o.siteName}}</span>
              <p class="site_p">地址：{{o.siteAdd}}</p>
              <p class="site_p">联系电话：{{o.sitePho}}</p>
              <div class="bottom">
                <time class="time">营业时间：{{ o.siteTime }}</time>
              </div>
              <el-button text class="button" > 预约 </el-button>
            </div>
          </el-card>
        </div>
      </div>
      <span class="mx-1"  style="font-size: 10px;float: left; color: #999999;margin-bottom: 10px">右滑查看更多>></span>
    </el-scrollbar>
  </div>
  <div class="cd_01">
    <el-scrollbar>
      <div class="scrollbar-flex-content">
        <el-text tag="b" style="font-size: 18px">篮球场地</el-text>
        <div
            v-for="(o, index) in basketballList"
            :key="index"
            :span="8"
            :offset="index > 0 ? 5 : 0"
            class="scrollbar-demo-item"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img
                :src="o.url"
                class="image"
            />
            <div style="padding: 14px">
              <span style="font-weight: bold;">{{o.siteName}}</span>
              <p class="site_p">地址：{{o.siteAdd}}</p>
              <p class="site_p">联系电话：{{o.sitePho}}</p>
              <div class="bottom">
                <time class="time">营业时间：{{ o.siteTime }}</time>
              </div>
              <el-button text class="button" > 预约 </el-button>
            </div>
          </el-card>
        </div>
      </div>
      <span class="mx-1"  style="font-size: 10px;float: left; color: #999999;margin-bottom: 10px">右滑查看更多>></span>
    </el-scrollbar>
  </div>
  <div class="cd_01">
    <el-scrollbar>
      <div class="scrollbar-flex-content">
        <el-text tag="b" style="font-size: 18px">羽毛球场地</el-text>
        <div
            v-for="(o, index) in badmintonList"
            :key="index"
            :span="8"
            :offset="index > 0 ? 5 : 0"
            class="scrollbar-demo-item"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img
                :src="o.url"
                class="image"
            />
            <div style="padding: 14px">
              <span style="font-weight: bold;">{{o.siteName}}</span>
              <p class="site_p">地址：{{o.siteAdd}}</p>
              <p class="site_p">联系电话：{{o.sitePho}}</p>
              <div class="bottom">
                <time class="time">营业时间：{{ o.siteTime }}</time>
              </div>
              <el-button text class="button" > 预约 </el-button>
            </div>
          </el-card>
        </div>
      </div>
      <span class="mx-1"  style="font-size: 10px;float: left; color: #999999;margin-bottom: 10px">右滑查看更多>></span>
    </el-scrollbar>
  </div>
  <div class="cd_01">
    <el-scrollbar>
      <div class="scrollbar-flex-content">
        <el-text tag="b" style="font-size: 18px">乒乓球场地</el-text>
        <div
            v-for="(o, index) in tableTennisList"
            :key="index"
            :span="8"
            :offset="index > 0 ? 5 : 0"
            class="scrollbar-demo-item"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img
                :src="o.url"
                class="image"
            />
            <div style="padding: 14px">
              <span style="font-weight: bold;">{{o.siteName}}</span>
              <p class="site_p">地址：{{o.siteAdd}}</p>
              <p class="site_p">联系电话：{{o.sitePho}}</p>
              <div class="bottom">
                <time class="time">营业时间：{{ o.siteTime }}</time>
              </div>
              <el-button text class="button" > 预约 </el-button>
            </div>
          </el-card>
        </div>
      </div>
      <span class="mx-1"  style="font-size: 10px;float: left; color: #999999;margin-bottom: 10px">右滑查看更多>></span>
    </el-scrollbar>
  </div>
</div>
</template>

<script>
export default {
  name: "SiteEnvironment",
  data() {
    return {
      footballList:[
        {
          url:require('@/assets/img/site/fb_01.png'),
          siteName:'中山市足球球馆',
          siteAdd:'广东省中山市银通街18号',
          sitePho:'(0760)88268201',
          siteTime:'周一至周日 09:00-22:00',
        },
        {
          url:require('@/assets/img/site/fb_02.png'),
          siteName:'沙溪足球场',
          siteAdd:'体育路与工业大道交叉路口西北侧',
          sitePho:'(0760)888543201',
          siteTime:'周一至周日 08:00-22:00',
        },

        {
          url:require('@/assets/img/site/fb_03.png'),
          siteName:'律动足球场',
          siteAdd:'广东省中山市同胜大街39号',
          sitePho:'(0760)862873201',
          siteTime:'周一至周日 09:00-22:00',
        },
        {
          url:require('@/assets/img/site/fb_04.png'),
          siteName:'兴中足球场',
          siteAdd:'广东省中山市兴中道28号',
          sitePho:'(0760)88311427',
          siteTime:'周一至周日 00:00-24:00',
        },
        {
          url:require('@/assets/img/site/fb_05.png'),
          siteName:'绩东一体育馆',
          siteAdd:'广东省中山市民安南路168号',
          sitePho:'(0760)888543201',
          siteTime:'周一至周日 07:30-22:00',
        },

        {
          url:require('@/assets/img/site/fb_06.png'),
          siteName:'南山足球场',
          siteAdd:'广东中山市长命水大道9楼',
          sitePho:'(0760)888543201',
          siteTime:'周一至周日 08:00-22:00',
        },
      ],
      basketballList:[
        {
          url:require('@/assets/img/site/bk_01.png'),
          siteName:'中山凯翔蓝球俱乐部',
          siteAdd:'凤翔下街金帝君悦轩西北侧约60米',
          sitePho:'13420482202',
          siteTime:'周一至周日 08:00-22:00',
        },
        {
          url:require('@/assets/img/site/bk_02.png'),
          siteName:'强者篮球',
          siteAdd:'广东省中山市福星路5号',
          sitePho:'13794181202',
          siteTime:'周一至周日 08:00-22:00',
        },
        {
          url:require('@/assets/img/site/bk_03.png'),
          siteName:'欲冠篮球',
          siteAdd:'顺庆一路2号富元君澳豪庭17-19卡',
          sitePho:'13148532879',
          siteTime:'周一至周日 08:00-22:00',
        },
        {
          url:require('@/assets/img/site/bk_04.png'),
          siteName:'新围篮球场',
          siteAdd:'中山市富围街四巷57号',
          sitePho:'113424509236',
          siteTime:'周一至周日 07:00-22:00',
        },
        {
          url:require('@/assets/img/site/bk_05.png'),
          siteName:'筋斗云篮球场',
          siteAdd:'广珠公路鸿福翰城东侧',
          sitePho:'13485232202',
          siteTime:'周一至周日 08:30-22:00',
        },
        {
          url:require('@/assets/img/site/bk_06.png'),
          siteName:'万胜围篮球',
          siteAdd:'凤翔下街西北侧约160米',
          sitePho:'13632182202',
          siteTime:'周一至周日 08:00-24:00',
        },
      ],
      badmintonList:[
        {
          url:require('@/assets/img/site/bm_01.png'),
          siteName:'奥霆羽毛球馆',
          siteAdd:'中山市天王路第6幢',
          sitePho:'(0760)23333313',
          siteTime:'周一至周日 09:00-23:30',
        },
        {
          url:require('@/assets/img/site/bm_02.png'),
          siteName:'圣狮羽毛球馆',
          siteAdd:'中山市圣狮村康乐北路9号',
          sitePho:'(0760)26654313',
          siteTime:'周一至周日 09:00-23:30',
        },{
          url:require('@/assets/img/site/bm_03.png'),
          siteName:'风行道羽毛球馆',
          siteAdd:'中山市昌明路晶艺科技园',
          sitePho:'13652227883',
          siteTime:'周一至周日 09:00-23:30',
        },{
          url:require('@/assets/img/site/bm_04.png'),
          siteName:'华越羽毛球馆',
          siteAdd:'东岗路平东工业区(平东小学对面)',
          sitePho:'(0760)86697711',
          siteTime:'周一至周日 09:00-23:30',
        },{
          url:require('@/assets/img/site/bm_05.png'),
          siteName:'波牛羽毛球馆',
          siteAdd:'进源路与东成路交汇处北100米',
          sitePho:'13822796433',
          siteTime:'周一至周日 10:00-23:30',
        },{
          url:require('@/assets/img/site/bm_06.png'),
          siteName:'豪汇羽毛球馆',
          siteAdd:'三乡镇龙头仔东路3号',
          sitePho:'15016182828',
          siteTime:'周一至周日 09:00-23:30',
        },
      ],
      tableTennisList:[
        {
          url:require('@/assets/img/site/tt_01.png'),
          siteName:'琪恒乒乓球馆',
          siteAdd:'民建街阜沙镇中心幼儿园南侧',
          sitePho:'18924987191',
          siteTime:'周一至周日 08:00-22:00',
        },
        {
          url:require('@/assets/img/site/tt_02.png'),
          siteName:'旗山乒乓球馆',
          siteAdd:'中山市旗山路444号3层',
          sitePho:'13823936009',
          siteTime:'周一至周日 08:00-22:00',
        },

        {
          url:require('@/assets/img/site/tt_03.png'),
          siteName:'奥创乒乓球俱乐部',
          siteAdd:'中山市东山上街19号4楼',
          sitePho:'15219784686',
          siteTime:'周一至周日 08:00-22:00',
        },

        {
          url:require('@/assets/img/site/tt_04.png'),
          siteName:'云汉乒乓球馆',
          siteAdd:'岐江公路石苑新村东侧约180米',
          sitePho:'18995127191',
          siteTime:'周一至周日 08:00-22:00',
        },
        {
          url:require('@/assets/img/site/tt_05.png'),
          siteName:'琪恒乒乓球馆',
          siteAdd:'民建街阜沙镇中心幼儿园南侧',
          sitePho:'18924987191',
          siteTime:'周一至周日 08:00-22:00',
        },
        {
           url:require('@/assets/img/site/tt_06.png'),
          siteName:'国远乒乓球馆',
          siteAdd:'东升镇东升东路华乐路1号三楼A层',
          sitePho:'13112999436',
          siteTime:'周一至周日 08:00-22:00',
        },
      ]
    }
  },
}
</script>
<script setup>
// import { ref } from 'vue'
//
// const currentDate = ref(new Date())
</script>

<style scoped>
.scrollbar-flex-content {
  display: flex;
  width: 90%;
  height: 295px;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 4px;
  width: 250px;
  height: 282px;
  margin: 10px;
  /*background: var(--el-color-danger-light-9);*/
  /*color: var(--el-color-danger);*/
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
  margin-top: 2px;
}

.image {
  width: 100%;
  height: 120px;
  display: block;
}
.site_p{
  font-size: 10px;
  color: #999999;
  margin-top: 2px;

}
.el-card:hover{
  background-color: #F8CF01;
  cursor: pointer;
}
.cd_01{
  margin-bottom: 15px;
}
</style>